<template>
  <div class="stylelint-test">
    <h1>Stylelint测试组件</h1>
    <p class="description">这个组件用于测试各种Stylelint规则</p>
    <div class="container">
      <div class="card">
        <h2>测试卡片1</h2>
        <p>测试内容</p>
      </div>
      <div class="card">
        <h2>测试卡片2</h2>
        <p>测试内容</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // 组件逻辑
  import { ref } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const count = ref(0)
</script>

<style lang="scss" scoped>
  /* 1. 测试基础样式规则 */
  .stylelint-test {
    color: #333;
    font-size: 16px;
    background-color: #f5f5f5;
    padding: 20px;

    h1 {
      color: #007bff;
      margin-bottom: 15px;
      font-size: 24px;
    }

    .description {
      color: #666;
      margin-bottom: 20px;
    }
  }

  /* 2. 测试嵌套规则 */
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;

    .card {
      flex: 1 1 300px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 15px;

      h2 {
        color: #007bff;
        font-size: 18px;
        margin-bottom: 10px;
      }

      p {
        color: #444;
        line-height: 1.5;
      }

      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
        transition: all 0.3s ease;
      }
    }
  }

  /* 3. 测试SCSS变量和混合 */
  $primary-color: #007bff;
  $secondary-color: #6c757d;
  $spacing-unit: 8px;

  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flex-container {
    @include flex-center;
    margin: $spacing-unit * 2;
    background-color: color.adjust($primary-color, $lightness: 40%);

    .flex-item {
      color: $secondary-color;
      padding: $spacing-unit;
    }
  }

  /* 4. 测试媒体查询 */
  @media (width <= 768px) {
    .container {
      flex-direction: column;

      .card {
        flex: 1 1 100%;
      }
    }

    .stylelint-test {
      padding: 10px;

      h1 {
        font-size: 20px;
      }
    }
  }

  /* 5. 测试属性排序和重复 */
  .test-ordering {
    display: block;
    position: relative;
    width: 100%;
    color: #444;
    z-index: 1;
  }

  /* 6. 测试颜色格式和单位 */
  .test-colors {
    color: #f00;
    background-color: #f00;
    border-color: #f00;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  }

  /* 7. 测试选择器嵌套深度 */
  .depth-1 {
    .depth-2 {
      .depth-3 {
        .depth-4 {
          .depth-5 {
            color: #000;
          }
        }
      }
    }
  }

  /* 8. 测试空规则和注释 */
  .empty-rule {
    /* 空规则 */
  }

  /*! 重要注释 */

  /* 普通注释 */
</style>
